<template>
  <div class="blog-category-container" v-loading="isLoading">
    <h2>文章分类</h2>
    <SideList :list="list" @select="handleSelect" />
  </div>
</template>

<script>
import SideList from "./SideList";
import fetchData from "@/mixins/fetchData.js";
import { getBlogTypes } from "@/api/blog.js";
export default {
  mixins: [fetchData([])],
  components: {
    SideList,
  },
  computed: {
    categoryId() {
      return +this.$route.params.categoryid || -1;
    },
    limit() {
      return +this.$route.query.limit || 10;
    },
    list() {
      const totalArticleCount = this.data.reduce((a, b) => a + b.articleCount,0);
      const result = [
        { name: "全部", id: -1, articleCount: totalArticleCount },
        ...this.data,
      ];
      return result.map((it) => ({
        ...it,
        isSelected: it.id === this.categoryId,
        aside: `${it.articleCount}篇`,
      }));
    },
  },
  methods: {
    async fetchData() {
      return await getBlogTypes();
    },
    handleSelect(item) {
      const query = {
        page: 1,
        limit: this.limit,
      };
      // 跳转到 当前的分类id  当前的页容量  newPage的页码
      if (item.id === -1) {
        this.$router.push({
          name: "Blog",
          query,
        });
      } else {
        this.$router.push({
          name: "BlogCate",
          query,
          params: {
            categoryid: item.id,
          },
        });
      }
    },
  },
};
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
.blog-category-container {
  width: 300px;
  box-sizing: border-box;
  padding: 20px;
  position: relative;
  height: 100%;
  overflow-y: auto;

  h2 {
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 1em;
    margin: 0;
  }
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    transition: all 300ms;
  }

  &::-webkit-scrollbar-track {
    background: @cyber;
    border-radius: 5px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  }

  &::-webkit-scrollbar-thumb {
    // background: linear-gradient(@, darken(@white, 1%));
    background: @white;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  }

  &::-webkit-scrollbar-corner {
    background: #f1f1f1;
  }
}
</style>
